/*
 * @Description:
 * @Author: HM
 * @Email: ming@cpglobalinnovation.com
 * @Date: 2025-02-10 16:37:44
 * @LastEditTime: 2025-02-12 15:15:12
 */
import { useState, useEffect } from "react";
import { useAccount, useToken, useBalance, useNetwork } from "wagmi";
import { Card, Grid, Link, Image, Button, Tabs } from "@arco-design/web-react";
import { httpFront, httpOther } from "../http/instance";
import axios, {
  AxiosInstance,
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosError,
} from "axios";
const WalletInfo = () => {
  const { address, isConnected, status } = useAccount();
  const { data, isLoading, isError } = useBalance({
    address,
  });
  const { chain, switchNetwork } = useNetwork();
  // 代币合约地址
  const tokenAddresses = [
    "0x6B175474E89094C44Da98b954EedeAC495271d0F", // DAI
    "0xdac17f958d2ee523a2206206994597c13d831ec7", // USDT
    "0xA0b86991c6218b36c1d19D4a2e9eb0CE3606eB48", // USDC
    // Add more token addresses here
  ];

  const [tokens, setTokens] = useState([]);
  // const getTokenBalances = async (address) => {
  //   const response = await axios.get(
  //     `https://api.moralis.io/v1/erc20?address=${address}`,
  //     {
  //       method: "GET",
  //       headers: {
  //         "X-API-Key": "YOUR_MORALIS_API_KEY", // 替换为你的 API 密钥
  //       },
  //     }
  //   );
  //   const data = await response.json();
  //   return data;
  // };
  // useEffect(() => {
  //   if (address) {
  //     getTokenBalances(address)
  //       .then((data) => {
  //         setTokens(data);
  //       })
  //       .catch((error) => console.error("Error fetching tokens", error));
  //   }
  // }, [address]);

  return (
    <>
      <Card style={{ width: 400 }} title="Connection Info">
        {isConnected ? (
          <div>
            <p>Address: {address}</p>
            <p>
              Balance: {isLoading && <span>加载中...</span>}
              {isError && <span>获取余额失败</span>}
              {data && (
                <span>
                  {data.formatted} {data.symbol}
                </span>
              )}
            </p>
            <p>Current Network: {chain?.name}</p>
            <p>Status: {status}</p>
          </div>
        ) : (
          <p>Not connected</p>
        )}
      </Card>
      {/* <Card style={{ width: 400 }} title="Connection">
        <ul>
          {tokens.map((token) => (
            <li key={token.token_address}>
              {token.symbol}: {token.balance}
            </li>
          ))}
        </ul>
      </Card> */}
    </>
  );
};
export default WalletInfo;
